<!-- 保鲜效果监测 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>保鲜效果监测</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="monitoring-page">   
    <el-row>  
      <el-col :span="24">  
        <el-card class="box-card">  
          <div slot="header" class="clearfix">  
            <span>实时数据</span>  
          </div>  
          <el-table :data="realTimeData" style="width: 100%">  
            <el-table-column prop="name" label="物品名称"></el-table-column>  
            <el-table-column prop="temperature" label="温度 (℃)"></el-table-column>  
            <el-table-column prop="humidity" label="湿度 (%)"></el-table-column>  
            <el-table-column prop="sterilizationLevel" label="杀菌等级"></el-table-column>  
            <!-- 其他列 -->  
          </el-table>  
        </el-card>  
      </el-col>    
    </el-row>  
    <el-row>  
      <el-col :span="24">  
        <el-card class="box-card">  
          <div slot="header" class="clearfix">  
            <span>保鲜效果图表</span>  
          </div> 
          <div ref="chart" style="width: 100%; height: 280px;"></div>  
        </el-card>  
        
      </el-col>  
    </el-row>  
  </div>
  </div>
</template>

<script>
// import {getrealTimeData, orderSave, orderDelete } from '../../api/basisMG'
import Chart from 'echarts'
export default {
  // name: 'MyComponent', // 组件的名称 
  data() {
    return {
      realTimeData:[],
      chartOptions:{  
      title: {  
        text: '果蔬保鲜效果监测',  
        subtext: '保鲜效果监测',  
        left: 'center'  
      },  
      // tooltip: {  
      //   trigger: 'axis',  
      //   axisPointer: {  
      //     type: 'shadow'  
      //   }  
      // },  
      legend: {  
        data: ['温度', '湿度'], // 图例列表  
        left:"20%",//距离 可百分比% 可像素pxs
        type: 'plain',
          orient: 'horizontal',
          show: true //图例是否显示
      },  
      xAxis: {  
        type: 'category',  
        data: ['等离子杀菌苹果', '等离子杀菌香蕉', '等离子杀菌橙子', '等离子杀菌草莓', '等离子杀菌葡萄'],//// X轴类目数据 
        axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }  
      },  
      yAxis: {  
        type: 'value'  
      },  
      series: [  
        {  
          name: '温度',  
          type: 'bar',  
          data: [5, 20, 36, 10, 10] // 温度数据  
        },  
        {  
          name: '湿度',  
          type: 'bar',  
          data: [50, 62, 45, 70, 80] // 湿度数据  
        }  
      ],   
    },

      }
      
  },

  created() {
    this.getequipmentData()
    
  },
  mounted(){
    this.getcharts()
  },
  methods: {
    // 获取数据列表
    getequipmentData(parameter) {
      //模拟测试环境数据
      let res = {
        msg: null,
        data: [
        { name: '等离子杀菌苹果', temperature: 4.2, humidity: 62, sterilizationLevel: '高' },  
      { name: '等离子杀菌香蕉', temperature: 5.1, humidity: 57, sterilizationLevel: '中' },  
      { name: '等离子杀菌橙子', temperature: 3.9, humidity: 65, sterilizationLevel: '高' },  
      { name: '等离子杀菌草莓', temperature: 4.5, humidity: 59, sterilizationLevel: '高' },  
      { name: '等离子杀菌土豆', temperature: 4.8, humidity: 60, sterilizationLevel: '中' }, 
        ]
      }
      this.realTimeData = res.data
      /***
       *  正式环境环境 调用接口
       */
      // getrealTimeData(parameter)
      //     .then(res => {
      //       this.loading = false
      //       if (res.success == false) {
      //         this.$message({
      //           type: 'info',
      //           message: res.msg
      //         })
      //       } else {
      //         this.realTimeData = res.data
      //       
      //       }
      //     })
      //     .catch(err => {
      //       this.loading = false
      //       this.$message.error('加载失败，请稍后再试！')
      //     })

    },
    //果蔬保鲜图表
    getcharts() {
      this.chart = Chart.init(this.$refs.chart)
      this.chart.setOption(this.chartOptions)
      // console.log(this.$refs.chart,"8987878787");
      // setTimeout(() => {
      //   this.chart.setOption(this.SCEoption)
      // }, 2000);
      
    },

  }

}
</script>

<style scoped>
.box-card{
  margin-top:20px;
}
</style>

 
 